<template>
  <VPage class="app-container">
    <div class="relative" style="height: 100%">
      <CategoryWrap
        type="sku"
        @toggle="toggle"
        @node-click="handleNodeClick"
      ></CategoryWrap>
      <div
        class="rightWrap"
        :style="{ 'margin-left': isShowLeft ? containerWidth + 'px' : '0px' }"
      >
        <VTable ref="tableRef" v-bind="tableOptins" class="is--line" @keyup="handleKeyUp">
          <template #form="{ form }">
            <div class="w-full">
              <el-tabs v-model="activeName" @tab-change="handleChange">
                <el-tab-pane
                  :label="item.label"
                  :name="item.name"
                  v-for="(item, index) in tabFilterList"
                  :key="index"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <el-select
              class="!w-[160px]"
              v-model="form.dev_status"
              collapse-tags
              placeholder="开发状态"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0].devStatusText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <VGroup>
              <el-select class="selectClass !w-[120px]" v-model="form.skuRange.type">
                <el-option
                  v-for="item in skuOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <multi-input
                v-model="form.skuRange.value"
                placeholder="批量搜索一行一个"
                class="w-50"
              ></multi-input>
            </VGroup>
            <multi-input
              v-model="form.spu"
              placeholder="SPU,批量搜索,一行一个"
              class="w-50"
            ></multi-input>
            <el-input
              v-model.trim="form.sku_cn_title"
              placeholder="产品名称"
              clearable
              class="w-50"
            />
            <el-select
              class="!w-[160px]"
              v-model="form.sku_product_type"
              collapse-tags
              placeholder="产品类型"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSku']?.[0].skuProductTypeText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              class="!w-[120px]"
              v-model="form.product_attribute"
              collapse-tags
              placeholder="是否多属性"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0].productAttributeText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              class="!w-[160px]"
              v-model="form.sample_testing"
              collapse-tags
              placeholder="样品检测结果"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSku']?.[0].sampleTestingText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <VGroup>
              <el-select
                class="selectClass !w-[100px]"
                v-model="form.personnelRange.type"
              >
                <el-option
                  v-for="item in personnelOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <select-personnel
                v-model="form.personnelRange.value"
                :multiple="true"
                placeholder="请选择"
              ></select-personnel>
            </VGroup>
            <VGroup>
              <el-select class="selectClass !w-[150px]" v-model="form.dateRange.type">
                <el-option
                  v-for="item in dateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-date-picker
                v-model="form.dateRange.value"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="max-width: 300px"
                :default-time="defaultTime()"
              />
            </VGroup>

            <el-select
              class="!w-[150px]"
              v-model="form.is_combination"
              placeholder="是否组合SKU"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSku']?.[0].mainAttributeText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <VGroup>
              <el-select
                class="!w-[130px]"
                v-model="form.default_supplier_type"
                placeholder="供应商类型"
              >
                <el-option
                  v-for="item in options['goods.GoodsSku']?.[0].supplierFilterTypeText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="form.supplier_id_one"
                filterable
                remote
                reserve-keyword
                :remote-method="supplierMethod"
                :loading="optionLoading"
                class="!w-[160px]"
                placeholder="供应商"
                clearable
              >
                <el-option
                  v-for="item in supplierOption"
                  :key="item.value"
                  :label="item.supplier_name"
                  :value="item.s_id"
                ></el-option>
              </el-select>
            </VGroup>
            <VGroup>
              <el-select
                class="selectClass !w-[130px]"
                v-model="form.salesStatusRange.type"
              >
                <el-option
                  v-for="item in salesStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                class="!w-[150px]"
                v-model="form.salesStatusRange.value"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSku']?.[0].salesStatusText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </VGroup>
          </template>
          <template #high_form="{ form }">
            <div class="flex flex-wrap gap-[8px]">
              <div class="high-form-title w-full">状态查询</div>
              <VGroup>
                <el-select
                  class="selectClass !w-[130px]"
                  v-model="form.supplyStatusRange.type"
                >
                  <el-option
                    v-for="item in supplyStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  class="!w-[150px]"
                  v-model="form.supplyStatusRange.value"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in options['goods.GoodsSku']?.[0].supplyStatusText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </VGroup>
              <VGroup>
                <el-select
                  class="selectClass !w-[130px]"
                  v-model="form.productStatusRange.type"
                >
                  <el-option
                    v-for="item in productStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="form.productStatusRange.value"
                  placeholder="请选择"
                  filterable
                  class="!w-[160px]"
                  clearable
                >
                  <el-option
                    v-for="item in options['goods.GoodsSpu']?.[0].spuStatusText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </VGroup>
              <VGroup>
                <el-select
                  class="selectClass !w-[185px]"
                  v-model="form.cleanProductStatusRange.type"
                >
                  <el-option
                    v-for="item in cleanProductStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="form.cleanProductStatusRange.value"
                  placeholder="请选择"
                  filterable
                  clearable
                  class="!w-[160px]"
                >
                  <el-option
                    v-for="item in options['goods.GoodsSku']?.[0].cleanProductStatusText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </VGroup>
              <el-select
                v-model="form.liveness"
                placeholder="新老品状态"
                filterable
                clearable
                class="!w-[160px]"
              >
                <el-option
                  v-for="item in options['goods.GoodsSkuStatistics']?.[0].livenessText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                class="w-40"
                v-model="form.product_level"
                placeholder="产品等级"
                filterable
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSku']?.[0].productLevelText"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
              <div class="high-form-title w-full">供应商信息</div>
              <el-select
                class="!w-[130px]"
                v-model="form.default_supplier_type"
                placeholder="供应商类型"
              >
                <el-option
                  v-for="item in options['goods.GoodsSku']?.[0].supplierFilterTypeText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="form.supplier_check_status"
                placeholder="供应商审核状态"
                class="!w-[160px]"
                multiple
                collapse-tags
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSkuSupplier']?.[0]
                    .purchaseCheckStatusText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <select-personnel
                v-model="form.supplier_manage"
                :multiple="true"
                placeholder="供应商负责人"
              ></select-personnel>
              <el-select
                v-model="form.is_refund_tax"
                placeholder="是否退税"
                class="!w-[160px]"
                multiple
                collapse-tags
                clearable
              >
                <el-option
                  v-for="item in isRefundTaxOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <multi-input
                v-model="form.custom_code"
                placeholder="海关编码，批量一行一个"
                class="w-[200px!important]"
              ></multi-input>
              <el-select
                v-model="form.is_stock_prepare"
                placeholder="是否备料"
                class="!w-[200px]"
                clearable
              >
                <el-option
                  v-for="item in isStockPrepareOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="form.factory_deliver"
                placeholder="是否支持工厂直发"
                class="!w-[200px]"
                clearable
              >
                <el-option
                  v-for="item in isFactoryDelivertOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <div class="high-form-title w-full">推荐平台/站点</div>
              <SelectPlatformSite
                v-model:platform="form.recommended_platform_name"
                valueKey="platform_code"
                v-model:site="form.recommended_site_code"
                platformPlaceholder="推荐平台"
                sitePlaceholder="推荐站点"
              >
              </SelectPlatformSite>
              <div class="high-form-title w-full">重量尺寸</div>
              <vGroup>
                <el-select class="!w-[60px]" v-model="form.packing_qty_symbol">
                  <el-option
                    v-for="item in operatorOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-input
                  class="!w-[160px]"
                  v-model.number="form.packing_qty"
                  :min="1"
                  placeholder="装箱数量"
                  oninput="value=value.replace(/[^\d]/g,'')"
                />
              </vGroup>
              <vGroup>
                <el-select class="!w-[60px]" v-model="form.cabinets_qty_symbol">
                  <el-option
                    v-for="item in operatorOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-input
                  class="!w-[160px]"
                  v-model.number="form.cabinets_qty"
                  :min="1"
                  placeholder="装柜数量"
                  oninput="value=value.replace(/[^\d]/g,'')"
                />
              </vGroup>
              <div class="high-form-title w-full">SPU类型查询</div>
              <el-select
                v-model="form.is_dangerous"
                placeholder="是否危险品"
                class="!w-[160px]"
                clearable
              >
                <el-option
                  v-for="item in whetherOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="!w-[160px]"
                v-model="form.need_photo"
                collapse-tags
                placeholder="是否需要拍照"
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].needPhotoText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <select-logistics
                class="!w-[160px]"
                v-model="form.logistics_attributes"
                placeholder="物流属性"
              ></select-logistics>
              <el-select
                class="!w-[160px]"
                v-model="form.brand_type"
                clearable
                placeholder="品牌类型"
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].brandTypeText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!-- <el-select
                v-model="form.goods_tag"
                clearable
                placeholder="产品标签"
                class="!w-[160px]"
                multiple
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].goodsTagText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->

              <el-select
                class="!w-[160px]"
                v-model="form.goods_source"
                collapse-tags
                placeholder="产品来源"
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].goodsSourceText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                class="!w-[160px]"
                v-model="form.recommended_level"
                collapse-tags
                placeholder="SPU等级"
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].recommendLevelText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <div class="high-form-title w-full">SKU类型查询</div>
              <el-select
                class="!w-[160px]"
                v-model="form.combined_sources"
                placeholder="组合类型"
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].combinedSourcesText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <select-brand
                class="!w-[160px]"
                v-model="form.brand_id"
                :multiple="true"
                placeholder="产品品牌"
              ></select-brand>
              <el-select
                v-model="form.plug_specification"
                clearable
                placeholder="插头规格"
                class="!w-[160px]"
              >
                <el-option
                  v-for="item in options['goods.GoodsSkuSalesInfo']?.[0]
                    .plugSpecificationText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="form.is_new_product"
                clearable
                placeholder="是否全新件"
                class="!w-[160px]"
              >
                <el-option
                  v-for="item in options['goods.GoodsSpu']?.[0].isNeedProcessText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="form.is_contains_accessories"
                clearable
                placeholder="是否含有辅料"
                class="!w-[160px]"
              >
                <el-option
                  v-for="item in options['goods.GoodsSku']?.[0].isContainsAccessoriesText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="form.is_seasonal_product"
                clearable
                placeholder="是否季节性产品"
                class="!w-[160px]"
              >
                <el-option
                  v-for="item in options['goods.GoodsSkuSalesInfo']?.[0]
                    .isSeasonalProductText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="form.is_build_model"
                clearable
                placeholder="是否已建模"
                class="!w-[160px]"
              >
                <el-option
                  v-for="item in options['goods.GoodsSkuSalesInfo']?.[0].isBuildModelText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <VGroup>
                <el-select class="selectClass !w-[160px]" v-model="form.accessor_type">
                  <el-option
                    v-for="item in accessorTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="form.accessor_use"
                  placeholder="辅料用途"
                  filterable
                  clearable
                  class="!w-[160px]"
                >
                  <el-option
                    v-for="item in options['goods.GoodsSku']?.[0].accessoriesUseText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </VGroup>
              <el-select
                class="!w-[160px]"
                v-model="form.product_level"
                placeholder="产品等级"
                filterable
                clearable
              >
                <el-option
                  v-for="item in options['goods.GoodsSku']?.[0].productLevelText"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
              <el-select
                class="!w-[160px]"
                v-model="form.alternative_sku_type_replace"
                placeholder="是否绑定切换SKU"
                filterable
                clearable
              >
                <el-option
                  v-for="item in alternativeSKUTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
              <div class="high-form-title w-full">列表排序</div>
              <el-radio-group class="block" v-model="form.order_key">
                <div>
                  <el-radio label="dev_add_time" size="large"
                    >按开发添加时间<span class="ml-2 text-[#999]"
                      >注：距离当前越近，排在上面</span
                    ></el-radio
                  >
                </div>
                <div>
                  <el-radio label="sku" size="large"
                    >按系统SKU<span class="ml-2 text-[#999]"
                      >注：数字越大，排在上面</span
                    ></el-radio
                  >
                </div>
              </el-radio-group>
            </div>
          </template>
          <template #purchasingInformation="{ row }">
            <div class="text-[#333333]">
              <div class="flex">
                样品检测结果：
                <div v-if="row.sample_testing == 0">未检测</div>
                <div v-else-if="row.sample_testing == 1" class="flex items-center">
                  <svg-icon
                    icon-class="state_finish_cover1"
                    class="text-green-400"
                  />样品检测通过
                </div>

                <div v-else-if="row.sample_testing == 2" class="flex items-center">
                  <svg-icon icon-class="hint_cover1" class="text-red-400" />
                  样品检测异常
                </div>
              </div>
              <div class="flex justify-between">
                <div>
                  采购未税报价：¥
                  <span>
                    <dataAuthority
                      auth="unit_price"
                      :value="row.supplier_quotation"
                    ></dataAuthority>
                  </span>
                </div>
                <el-button type="primary" link @click="handlePurchaseRecord(row)"
                  >采购记录</el-button
                >
              </div>
              <div class="">
                采购未税价：¥
                <span>
                  <dataAuthority
                    auth="purchase_untaxed_price"
                    :value="row.purchase_untaxed_price"
                  ></dataAuthority>
                </span>
              </div>
              <div class="">
                采购含税价：¥
                <span>
                  <dataAuthority
                    auth="unit_price_tax"
                    :value="row.unit_price_tax"
                  ></dataAuthority>
                </span>
              </div>
              <div class="flex justify-between">
                <div class="flex items-center">
                  本地仓加权采购价
                  <el-tooltip class="item" effect="dark" placement="top">
                    <template #content>
                      说明<br />1、初始数据基于默认供应商报价，退税:取采购未税价；不退税：取采购未税报价
                      ；<br />
                      2、后续数据基于本地仓库加权成本（国内仓），取最大成本（排除样品仓）；<br />
                      3、在未获取到仓库加权成本前，修改默认供应商报价，将同步修改此加权成本；<br />
                      4、仓库加权成本，每天凌晨同步一次；<br />
                      5、组合SKU基于上述逻辑，按子SKU*组成量，进行计算；<br />
                      6、此成本用于运营在销售定价时进行参考，也可点击‘头程记录’查看该SKU的头程/库存数据；<br />
                    </template>
                    <svg-icon icon-class="QuestionFilled"></svg-icon> </el-tooltip
                  >:<dataAuthority
                    auth="purchase_weighted_cost"
                    :value="row.average_purchase_price"
                  ></dataAuthority>
                </div>
                <el-button type="primary" link @click="handleTcRecord(row)"
                  >头程记录</el-button
                >
              </div>
              <!-- <div class="">仓库加权成本（CNY）：¥{{ row.average_purchase_price }}</div>
              <div class="text-xs text-gray-500">最近¥0.00 /最低¥ 0.00</div> -->
            </div>
          </template>
          <template #toolbar_btns>
            <template v-if="activeName == 0">
              <vAuth auth="/goods/task/product/add">
                <el-dropdown
                  :max-height="290"
                  trigger="click"
                  placement="bottom-start"
                  @command="handleAdd"
                >
                  <el-button type="primary">
                    新增产品<i
                      style="font-size: 10px !important"
                      class="dk-iconfont icon-ArrowDown"
                    />
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        v-for="(item, index) in addProductOptions"
                        :key="index"
                        :command="item.value"
                        >{{ item.label }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </vAuth>
              <VButton
                auth="/goods/goods-management/spu-list/addCombination"
                @click="addCombination"
                >新增销售组合SKU</VButton
              >
              <BatchOperation
                :batchOptions="batchOptions"
                :getTable="getBatchTableSelect"
              />
              <VButton auth="/goods/goods-management/spu-list/copy" @click="copyGoods">
                <svg-icon icon-class="copy" />复制商品
              </VButton>
            </template>
            <template v-if="activeName == 1">
              <el-button @click="recover"> 恢复SKU</el-button>
            </template>
            <el-dropdown class="ml-auto" @command="commandOperate($event, row)">
              <el-button>
                导出操作
                <i
                  style="font-size: 10px !important"
                  class="dk-iconfont icon-ArrowDown"
                />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <VAuth auth="/goods/task/product/export">
                    <el-dropdown-item command="goods_spu">导出</el-dropdown-item>
                  </VAuth>
                  <VAuth auth="/goods/task/product/export-image">
                    <el-dropdown-item command="good_spu_img">导出(主图)</el-dropdown-item>
                  </VAuth>
                  <VAuth class="ml-auto" auth="/goods/task/product/supplierExport">
                    <el-dropdown-item command="goods_spu_supplier"
                      >供应商信息导出</el-dropdown-item
                    >
                  </VAuth>
                  <VAuth
                    class="ml-auto"
                    auth="/goods/task/product/export-combination-sku"
                  >
                    <el-dropdown-item command="goods_combination_export"
                      >组合SKU导出</el-dropdown-item
                    >
                  </VAuth>
                  <VAuth class="ml-auto" auth="/goods/task/product/goods_sku_accessor">
                    <el-dropdown-item command="goods_sku_accessor"
                      >关联辅料导出</el-dropdown-item
                    >
                  </VAuth>
                  <VAuth class="ml-auto" auth="/goods/task/product/goods_sku_clean_info">
                    <el-dropdown-item command="goods_sku_clean_info"
                      >清关信息导出</el-dropdown-item
                    >
                  </VAuth>
                  <VAuth
                    class="ml-auto"
                    auth="/goods/task/product/goods_supplier_log_list"
                  >
                    <el-dropdown-item command="goods_supplier_log_list"
                      >供应商历史报价导出</el-dropdown-item
                    >
                  </VAuth>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </VTable>
      </div>
    </div>
  </VPage>
  <AdvancedSearch
    ref="searchRef"
    :options="options"
    :isSearch="true"
    @condition="getConditionList"
    @query="queryForm"
  ></AdvancedSearch>
  <AddCombinationSKU ref="combinationSKURef" @query="queryForm"></AddCombinationSKU>
  <ChangeState ref="changeStateRef"></ChangeState>
  <VLog
    ref="roleLog"
    class="dialogPublic"
    :api="queryLogList"
    options="spuId"
    :isSearch="true"
  ></VLog>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  <ChangeDetails ref="ChangeDetailsRef"></ChangeDetails>
  <HistorySupplierPrice ref="HistorySupplierPriceRef"></HistorySupplierPrice>
  <CostDetails ref="CostDetailsRef"></CostDetails>
  <stockInfo ref="stockInfoRef"></stockInfo>
</template>
<script setup name="Goods-managementSku-list" lang="jsx">
import {
  batchOptions,
  accessorTypeOptions,
  alternativeSKUTypeOptions,
  isStockPrepareOptions,
  isFactoryDelivertOptions,
} from "./data.js";
import {
  queryConditionList,
  skuRecover,
  querySkuList,
  queryLogList,
  getSupplierList,
} from "../api";
import { getLock } from "@/views/task/product/api.js";
import { getOptions } from "@/api/index.js";
import AdvancedSearch from "../components/AdvancedSearch";
import AddCombinationSKU from "../components/AddCombination/index.vue";
import ChangeState from "../components/ChangeState";
import VLog from "@/components/VLog";
import VImage from "@/components/Image/index.vue";
import { ElMessage } from "element-plus";
import { nextTick, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import DerivedCenter from "@/components/DerivedCenter";
import CategoryWrap from "@/components/CategoryWrap";
import BatchOperation from "@/views/task/product/components/BatchOperation/index.vue";
import HistorySupplierPrice from "@/views/task/product/components/HistorySupplierPrice.vue";
import SelectLogistics from "@/components/SelectLogistics";
import SelectBrand from "@/components/SelectBrand";
import {
  dateOptions,
  personnelOption,
  skuOptions,
  operatorOptions,
  whetherOptions,
  salesStatusOptions,
  supplyStatusOptions,
  cleanProductStatusOptions,
  productStatusOptions,
  isRefundTaxOptions,
} from "../spu-list/data.js";
import SelectPlatformSite from "@/components/SelectPlatformSite";
import AccessoriesInfo from "@/components/Popover/AccessoriesInfo/index.vue"; // 辅料信息
import childCombination from "@/components/Popover/CombinationInfo/childCombination.vue"; // 组合SKU SKU子信息
import parentCombination from "@/components/Popover/CombinationInfo/parentCombination.vue"; // 组合SKU SKU父信息
import { addProductOptions } from "../../task/product/data.js";
import ChangeDetails from "@/views/task/product/components/ChangeDetails.vue";
import seasonalProduct from "@/components/Popover/seasonalProduct/index.vue";
import CostDetails from "../../task/product/components/CostDetails";
import ToggleSKUInfo from "@/components/Popover/ToggleSKUInfo/index.vue"; // 切换SKU信息
import stockInfo from "@/components/Dialog/stockInfo/index.vue";

const tableRef = ref();
const router = useRouter();
const options = ref([]);
// 获取
const fetchOption = () => {
  getOptions({
    name: [
      "goods.GoodsSpu",
      "goods.GoodsSku",
      "goods.GoodsSkuSalesInfo",
      "goods.GoodsSkuSupplier",
      "goods.GoodsSkuAccessories",
      "goods.GoodsSkuSupplier",
      "gallery.GoodsSkuGalleryContents",
      "goods.GoodsSkuStatistics",
      "goods.GoodsSkuIdentificationProcessing",
    ],
  }).then((res) => {
    options.value = res.data;
  });
};
fetchOption();

provide("options", options);

const tabList = [
  {
    label: "产品池",
    name: 0,
  },
  {
    label: "产品回收池",
    name: 1,
    auth: "/goods/goods-management/spu-list/recyclePool",
  },
];

const handleChange = (val) => {
  tableRef.value.setForm({
    is_delete: val,
  });
  refresh();
};

const tableOptins = reactive({
  showHeaderOverflow: false,
  showOverflow: false,
  rowConfig: { height: 180 },
  columnConfig: {
    resizable: true,
  },
  formConfig: {
    save: "sku-list",
    data: {
      dev_status: "",
      product_category: "",
      date: { value: [], range: true, rangeKeys: ["start_time", "end_time"] }, // 日期
      group: { type: "group1", value: "" }, // 组合
      dateRange: { type: "dev_add_time", value: "", range: true },
      personnelRange: { type: "create_user", value: "" }, // 组合
      skuRange: { type: "sku", value: [], range: false },
      default_supplier_type: 1,
      packing_qty_symbol: ">",
      cabinets_qty_symbol: ">",
      salesStatusRange: { type: "sales_status", value: [], range: false },
      supplyStatusRange: { type: "supply_status", value: [], range: false },
      cleanProductStatusRange: { type: "clean_product_status", value: [], range: false },
      productStatusRange: { type: "product_status", value: [], range: false },
      accessor_type: 1,
      order_key: "dev_add_time",
      order_method: "desc",
    },
  },
  columns: [
    { type: "checkbox", width: "40" },
    {
      field: "name",
      title: "产品",
      width: "470",
      slots: {
        default: ({ row, level }) => {
          return (
            <div class="relative w-full">
              <div class="relative  float-left" style="width:100px;height:100px">
                {row.brand_type != 1 && (
                  <div
                    class={[
                      "absolute",
                      "text-white",
                      "absolute-radius",
                      "z-10",
                      row.brand_type == 1 ? "bg-red-600" : "bg-gray-600",
                    ]}
                  >
                    {row.brand_type_text}
                  </div>
                )}
                <VImage
                  src={row.attr_img_watermark || row.attr_img}
                  width={100}
                  height={100}
                  preview={false}
                  onClick={() => handlePreview(row)}
                ></VImage>
                {row.is_change_order && (
                  <div>
                    <el-button link onClick={() => handleViewChangeDetail(row.id)}>
                      是否变更：<span class="text-[#3487ff]">是</span>
                    </el-button>
                  </div>
                )}
              </div>
              <div class="ml-[105px]">
                <div class="flex justify-start items-center mb-2">
                  <div
                    class={[
                      "mr-2",
                      "text-[12px]",
                      "px-1",
                      `dev_status_color${row.dev_status}`,
                    ]}
                  >
                    {row.dev_status_text}
                  </div>
                  {row.product_status != 1 && (
                    <div
                      class={[
                        "mr-2",
                        "text-[12px]",
                        "px-1",
                        `color5`,
                        row.product_status == 2 ? "bg-red-600 text-white" : "",
                        "rounded-[4px]",
                      ]}
                    >
                      {row.product_status_text}
                    </div>
                  )}{" "}
                  {row.sales_status != 1 && (
                    <div
                      class={[
                        "mr-2",
                        "text-[12px]",
                        "px-1",
                        `sales_status${row.sales_status}`,
                      ]}
                    >
                      {row.sales_status_text}
                    </div>
                  )}
                  {row.supply_status != 1 && (
                    <div class={["mr-2", "text-[12px]", "px-1", `supply_status`]}>
                      {row.supply_status_text}
                    </div>
                  )}
                  {row.clean_product_status && (
                    <div
                      class={[
                        "whitespace-nowrap",
                        "text-[12px]",
                        "mr-2",
                        "px-1",
                        `clean_product_status${row.clean_product_status}`,
                      ]}
                    >
                      {row.clean_product_status_text}
                    </div>
                  )}
                </div>
                <div class="flex justify-start items-center mb-2">
                  {row.is_parent_combination ? (
                    <parentCombination row={row}></parentCombination>
                  ) : (
                    <div class="w-[130px]">
                      <VText title="SKU" value={row.sku} copy={true}></VText>
                    </div>
                  )}

                  <el-button type="primary" link onClick={() => handleView(row)}>
                    产品详情
                  </el-button>
                </div>
                <div class="flex justify-start items-center text-[14px]">
                  <VText title="SPU" value={row.spu} copy={true}></VText>
                </div>
                <div class="w-full mr-2">
                  <VText title="自定义SKU" value={row.custom_sku} copy={true}></VText>
                </div>
                <div class="flex justify-start mb-1">
                  <VText value={row.spu_category_text}></VText>
                </div>
                <div class="flex justify-start flex-wrap">
                  {row.product_level && (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="产品等级"
                      placement="top"
                    >
                      <div class="product_level_icon mr-1">
                        <svg-icon
                          icon-class={"product_level" + row.product_level}
                          class="text-[56px]"
                        ></svg-icon>
                      </div>
                    </el-tooltip>
                  )}
                  {row.purchase_days && row.purchase_days > 0 ? (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="采购天数"
                      placement="top"
                    >
                      <div class="btn-style">{row.purchase_days} 天</div>
                    </el-tooltip>
                  ) : (
                    ""
                  )}
                  {row?.goods_sku_supplier?.min_order_quantity >= 0 ? (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="起批量"
                      placement="top"
                    >
                      <div class="btn-style">
                        {row.goods_sku_supplier.min_order_quantity} 件起批
                      </div>
                    </el-tooltip>
                  ) : (
                    ""
                  )}
                  {row.product_attribute == 2 ? (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content={row.product_attribute_text}
                      placement="top"
                    >
                      <div class="btn-style">{row.product_attribute_text}</div>
                    </el-tooltip>
                  ) : (
                    ""
                  )}
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="物流属性"
                    placement="top"
                  >
                    <div class="btn-style flex items-center">
                      {" "}
                      {row.base_logistics_attributes?.is_dangerous ? (
                        <img
                          class="w-[25px] h-[25px] mr-1"
                          src="https://xc-goods.oss-cn-shenzhen.aliyuncs.com/20240515/data/Company/%28wei%29%2B045240188d69d8949e163fd84c2a5da50138df308.png"
                        ></img>
                      ) : (
                        ""
                      )}
                      {row.logistics_attributes_name || "--"}
                    </div>
                  </el-tooltip>
                  {row.is_contains_accessories == 1 && (
                    <AccessoriesInfo row={row}></AccessoriesInfo>
                  )}
                  {row.sample_purchase_type && row.sample_purchase_type != 1 && (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="采购类型"
                      placement="top"
                    >
                      <div class="btn-style">{row.sample_purchase_type_text}</div>
                    </el-tooltip>
                  )}
                  {row.goods_sku_supplier?.is_refund_tax == 2 && (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="是否退税"
                      placement="top"
                    >
                      <div class="btn-style mb-1">
                        {row.goods_sku_supplier.is_refund_tax_text || "--"}
                      </div>
                    </el-tooltip>
                  )}
                  {row.is_seasonal_product == 1 && (
                    <seasonalProduct data={row}></seasonalProduct>
                  )}
                  {row.is_new_product == 0 && (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="是否全新件"
                      placement="top"
                    >
                      <div class="btn-style mb-[2px]">翻新件</div>
                    </el-tooltip>
                  )}
                  {row.alternative_sku_type ? (
                    <ToggleSKUInfo row={row}></ToggleSKUInfo>
                  ) : (
                    ""
                  )}
                  {Number(row.combined_sources) ? (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="组合类型"
                      placement="top"
                    >
                      <div class="btn-style mb-[2px]">
                        {row.combined_sources == 1
                          ? "开发组合"
                          : row.combined_sources == 2
                          ? "销售组合"
                          : row.combined_sources == 3
                          ? "拆包组合"
                          : ""}
                      </div>
                    </el-tooltip>
                  ) : (
                    ""
                  )}
                  {Number(row.liveness) ? (
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="新老品状态"
                      placement="top"
                    >
                      <div class="btn-style mb-[2px]">
                        {row.liveness == 1 ? "新品" : row.liveness == 2 ? "老品" : ""}
                      </div>
                    </el-tooltip>
                  ) : (
                    ""
                  )}
                </div>
              </div>
              <div class="absolute top-0 right-0 flex">
                {level == 0 && <childCombination data={row}></childCombination>}
              </div>
            </div>
          );
        },
      },
    },
    {
      field: "product-name",
      title: "产品名称",
      width: "350",
      slots: {
        default: ({ row, level }) => {
          return (
            <div class="text-[#333333]">
              <vText value={row.sku_cn_title} line={6} copy={true}></vText>
            </div>
          );
        },
      },
    },
    {
      field: "product-type",
      title: "产品类型/采购信息",
      width: "250",
      slots: {
        default: "purchasingInformation",
      },
    },
    {
      field: "product-info",
      title: "产品信息",
      width: "200",
      slots: {
        default: ({ row, level }) => {
          return (
            <div>
              <div class="">
                <span class="text-[--base-sub-text-color]">毛重：</span>
                {row.gross_weight_g}g
              </div>
              <div class="">
                <span class="text-[--base-sub-text-color]">包装尺寸：</span>
                {row.packing_size_cm?.length}*{row.packing_size_cm?.width}*
                {row.packing_size_cm?.height}cm
              </div>
              <div class="text-[12px] text-[#999999]">
                净重：{row.net_weight_g}g | 包裹重：{row.packing_weight_g}g
              </div>
              <div class="text-[12px] text-[#999999]">
                整箱毛重：{row.packing_gross_weight_kg}kg | 装箱数：{row.packing_qty}
              </div>
              <div class="text-[12px] text-[#999999]">
                整箱尺寸：{row.packing_qty_size_cm?.length || "0.00"}*
                {row.packing_qty_size_cm?.width || "0.00"}*
                {row.packing_qty_size_cm?.height || "0.00"}cm
              </div>
              <div class="text-[12px] text-[#999999]">
                产品尺寸：{row.product_size_cm?.length || "0.00"}*
                {row.product_size_cm?.width || "0.00"}*
                {row.product_size_cm?.height || "0.00"}cm
              </div>
            </div>
          );
        },
      },
    },
    {
      field: "sales_volume_all",
      title: "销量",
      width: "120",
      sortable: true,
      slots: {
        default: ({ row }) => {
          return (
            <div class="">
              <div class="flex items-center ">
                <span class="text-[--base-sub-text-color]">7天：</span>
                <dataAuthority
                  auth="sales_volume"
                  value={row.sales_volume?.sales_volume_seven_days}
                />
              </div>
              <div class="flex items-center">
                <span class="text-[--base-sub-text-color]">14天：</span>
                <dataAuthority
                  auth="sales_volume"
                  value={row.sales_volume?.sales_volume_fourteen_days}
                />
              </div>
              <div class="flex items-center">
                <span class="text-[--base-sub-text-color]">30天：</span>
                <dataAuthority
                  auth="sales_volume"
                  value={row.sales_volume?.sales_volume_thirty_days}
                />
              </div>
              <div class="flex items-center">
                <span class="text-[--base-sub-text-color]">90天：</span>
                <dataAuthority
                  auth="sales_volume"
                  value={row.sales_volume?.sales_volume_ninety_days}
                />
              </div>
              <div class="flex items-center">
                <span class="text-[--base-sub-text-color]">总销量：</span>
                <dataAuthority
                  auth="sales_volume"
                  value={row.sales_volume?.sales_volume_all}
                />
              </div>
            </div>
          );
        },
      },
    },
    {
      field: "inventory",
      title: "库存",
      width: "170",
      slots: {
        header: [
          {
            title: "库存",
            question: `说明：<br />库存数据来源于仓库模块，同步频率：2小时同步一次<br />实时库存：仓库定时通过平台/海外仓接口，获取平台、海外仓库存，海外仓30分钟同步一次；FBA仓四小时同步一次<br />进销存库存：由仓库系统基于单据自动计算`,
            sort: "inventory",
          },
        ],
        default: ({ row }) => {
          return (
            <div>
              <div
                class="flex items-center base-text-color cursor-pointer"
                onClick={() => handleViewStock(row, "sku", 2)}
              >
                <svg-icon icon-class="tongji" />
                <div>{row.real_time_inventory}</div>
                （实时库存）
              </div>
              <div
                class="flex items-center base-text-color cursor-pointer"
                onClick={() => handleViewStock(row, "sku", 1)}
              >
                <svg-icon icon-class="tongji" />
                <div>{row.inventory}</div>
                （进销存）
              </div>
            </div>
          );
        },
      },
    },
    {
      field: "gross_profit",
      title: "毛利率",
      width: "160",
      slots: {
        default: ({ row }) => {
          const sales_gross_profit = computeGrossProfitMargin(
            Number(row.income),
            Number(row.gross_profit)
          );
          const product_gross_profit = computeGrossProfitMargin(
            Number(row.income),
            Number(row.product_gross_margin)
          );
          return (
            <div>
              <div class="flex items-center">
                销售毛利率：
                <dataAuthority
                  auth="sales_gross_profit"
                  value={sales_gross_profit}
                ></dataAuthority>
              </div>
              <div class="flex items-center">
                产品毛利率：
                <dataAuthority
                  auth="product_gross_profit"
                  value={product_gross_profit}
                ></dataAuthority>
              </div>
            </div>
          );
        },
      },
    },
    {
      field: "operator",
      title: "操作人员",
      width: "360",
      slots: {
        default: ({ row }) => {
          return (
            <div className="w-full column-operator-time flex justify-start  text-[var(--base-text-color)]">
              <div className="lef w-3/6">
                <vText title="添加" value={row.create_user_text}></vText>
                <vText title="开发" value={row.developer_text}></vText>
                <vText title="审核" value={row.dev_reviewer_text}></vText>
                <vText title="品质" value={row.quality_inspector_text}></vText>
              </div>
              <div className="lef w-3/6">
                <vText title="采购" value={row.purchaser_text}></vText>
                <vText title="图片" value={row.img_processor_text}></vText>
                <vText title="编辑" value={row.editor_text}></vText>
              </div>
            </div>
          );
        },
      },
    },
    {
      field: "operator-time",
      title: "操作时间",
      width: "420",
      slots: {
        default: ({ row }) => {
          return (
            <div className="w-full column-operator-time flex justify-start text-[#333333]">
              <div className="lef w-3/6">
                <div class="text-xs pt-1 leading-5">
                  <span class="text-[var(--base-sub-text-color)]">开发添加: </span>
                  {row.dev_add_time}
                </div>
                <div class="text-xs pt-1 leading-5">
                  <span class="text-[var(--base-sub-text-color)]">开发审核: </span>
                  {row.dev_review_time}
                </div>
                <div class="text-xs pt-1 leading-5">
                  <span class="text-[var(--base-sub-text-color)]">检测时间: </span>
                  {row.sample_testing == 1 ? row.sample_detection_time : " - "}
                </div>
              </div>
              <div>
                <div class="text-xs pt-1 leading-5">
                  <span class="text-[var(--base-sub-text-color)]">图片任务: </span>
                  {row.image_processing_time}
                </div>
                <div class="text-xs pt-1 leading-5">
                  <span class="text-[var(--base-sub-text-color)]">图片审核: </span>
                </div>
                <div class="text-xs pt-1 leading-5">
                  <span class="text-[var(--base-sub-text-color)]">刊登上架: </span>
                </div>
              </div>
            </div>
          );
        },
      },
    },
    {
      title: "操作",
      width: "76",
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return (
            <div class="table-option">
              <div>
                <VButton
                  auth="/goods/task/product/edit"
                  type="primary"
                  link
                  onClick={() => handleEdit(row)}
                >
                  编辑
                </VButton>
              </div>
              <div>
                <el-button type="primary" link onClick={() => viewLog(row.spu_id)}>
                  {" "}
                  日志
                </el-button>
              </div>
            </div>
          );
        },
      },
    },
  ],
  sortConfig: { remote: true, trigger: "cell", orders: ["desc", "asc", null] }, // 默认远程排序
  proxyConfig: {
    seq: true,
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page, form, sorts }) => {
        if (form.sort && form.sort.field) {
          form.order_key = form.sort.field;
          form.order_method = form.sort.rule;
        } else {
          form.order_key = "dev_add_time";
          form.order_method = "desc";
        }

        if (form.alternative_sku_type_replace) {
          if (form.alternative_sku_type_replace == 2) {
            form.alternative_sku_type = [0, 2];
          } else {
            form.alternative_sku_type = form.alternative_sku_type_replace;
          }
        } else {
          form.alternative_sku_type = "";
        }

        const res = await querySkuList({ ...form, ...page });
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total,
          });
        });
      },
    },
  },
});
//更新表格数据
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};

const data = reactive({
  rowId: null,
  activeName: 0,
  searchOptions: [],
  searchId: null,
  isShowLeft: true,
  tabFilterList: [],
  containerWidth: 280,
  historySupplierData: {},
});
const {
  activeName,
  searchOptions,
  isShowLeft,
  containerWidth,
  tabFilterList,
  historySupplierData,
} = toRefs(data);

//选中菜单树
const handleNodeClick = (data) => {
  nextTick(() => {
    if (data.type == 1) {
      tableRef?.value.setFormField("spu_category", data.spu_category);
      tableRef?.value.setFormField("all_child_user", []);
    } else if (data.type == 2) {
      tableRef?.value.setFormField("spu_category", []);
      tableRef?.value.setFormField("all_child_user", data.all_child_user);
    }
    refresh();
  });
};

const changeStateRef = ref();

const copyGoods = () => {
  const records = getSelectRow();
  if (records.length !== 1) {
    ElMessage({
      showClose: true,
      message: "请选择一条数据！",
      type: "warning",
    });
    return false;
  }
  if (records.length > 1) return ElMessage.error("只能复制一个产品!");
  router.push({
    path: "/task/product/add",
    query: {
      spuId: records[0].spu_id,
      type: "copy",
    },
  });
};
//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords();
};
const getBatchTableSelect = () => {
  let records = tableRef?.value.$table.getCheckboxRecords();
  return { name: "sku_ids", records };
};
// 查询条件列表
const getConditionList = async () => {
  try {
    const res = await queryConditionList({
      apiName: "sku-list",
    });
    searchOptions.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};
getConditionList();

const queryForm = (data = {}) => {
  const form = tableRef.value.getForm();
  tableRef.value.setForm({ ...form, ...data });
  nextTick(() => {
    tableRef.value.query();
  });
};

const combinationSKURef = ref();
const addCombination = () => {
  nextTick(() => {
    combinationSKURef.value.open(2);
  });
};

// 新增
const handleAdd = (value) => {
  router.push({
    path: "/task/product/add",
    query: {
      type: "add",
      sku_product_type: value,
    },
  });
};
const recover = async () => {
  const records = getSelectRow();
  if (records.length == 0) {
    ElMessage.error("至少选择一项");
  }
  const skuIds = records.map((i) => i.id);
  try {
    const res = await skuRecover({ skuIds });
    ElMessage.success(res.message);
    initForm();
    close();
  } catch (e) {
    throw Error(e);
  }
};

// 查看
const handleView = (row) => {
  router.push({
    path: "/task/product/detail",
    query: {
      spuId: row.spu_id,
      sku: row.sku,
    },
  });
};

// 编辑
const handleEdit = async (row) => {
  const { data } = await getLock({ spuId: row.spu_id });
  if (data != 0) {
    ElMessage.warning(`[${data}]正在编辑，请稍后操作；或者联系相关同事退出编辑操作。`);
    return;
  }
  router.push({
    path: "/task/product/edit",
    query: {
      spuId: row.spu_id,
      type: "edit",
      sku: row.sku,
    },
  });
};

//查看日志
const roleLog = ref();
const viewLog = (id) => {
  roleLog.value.open(id);
};

onMounted(() => {
  tabFilterList.value = tabList.filter((i) => {
    if ((window.BTN_AUTH || []).includes(i.auth) || !i.auth) {
      return i;
    }
  });
});

const handleKeyUp = (event) => {
  if (event.keyCode === 13 || event.key === "Enter") {
    queryForm();
    event.stopPropagation();
  }
};

const toggle = (val, width) => {
  isShowLeft.value = val;
  if (val) {
    containerWidth.value = width;
  }
};

const supplierOption = ref([]);
const optionLoading = ref(false);
const supplierMethod = async (query) => {
  if (query) {
    const { data } = await getSupplierList({
      page: 1,
      page_size: 1000,
      supplier_name: query,
    });
    supplierOption.value = data || [];
  } else {
    supplierOption.value = [];
  }
};

//图片放大
const handlePreview = (row) => {
  if (!row.attr_img) {
    return ElMessage.error("无可查看图片");
  }
  router.push({
    path: "/task/product/preview",
    query: {
      id: row.id,
      sku: row.sku,
    },
  });
};

// 处理月份显示
const formatMonth = (start, end) => {
  if (start == end) {
    return `(${start}月)`;
  } else {
    return `(${start}-${end}月)`;
  }
};

// 导出中心
const DerivedCenterRef = ref();

const commandOperate = (tag_name) => {
  const records = getSelectRow().map((i) => {
    return i.custom_sku;
  });

  const uniqueArray = [...new Set(records)];
  let condition = {};
  if (uniqueArray.length) {
    condition.custom_sku = uniqueArray;
  } else {
    condition = tableRef.value.getQueryForm();
  }

  if (condition.alternative_sku_type_replace) {
    if (condition.alternative_sku_type_replace == 2) {
      condition.alternative_sku_type = [0, 2];
    } else {
      condition.alternative_sku_type = condition.alternative_sku_type_replace;
    }
  } else {
    condition.alternative_sku_type = "";
  }
  DerivedCenterRef.value.open({
    tag_name,
    condition,
  });
};

// 查看变更单详情
const ChangeDetailsRef = ref();
const handleViewChangeDetail = (sku_id) => {
  ChangeDetailsRef.value.open(sku_id);
};

// 采购记录
const HistorySupplierPriceRef = ref();
const handlePurchaseRecord = (row) => {
  HistorySupplierPriceRef.value.open(row);
};

// 头程记录
const CostDetailsRef = ref();
const handleTcRecord = (row) => {
  CostDetailsRef.value.open(row);
};

// 计算毛利率
const computeGrossProfitMargin = (income, gross) => {
  if (!income || !gross) {
    return 0;
  }

  return ((gross / income) * 100).toFixed(2) + "%";
};

// 销量
const stockInfoRef = ref();
const handleViewStock = (row, level, type) => {
  stockInfoRef.value.open(row, level, type);
};
</script>
<style lang="scss">
.w-15 {
  width: 3.5rem;
  text-align: left;
  margin-left: 0 !important;
  margin-right: 12px !important;
}

.sales_status1 {
  color: #ffffff;
  background: #faad14;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.sales_status2,
.sales_status4 {
  color: #ffffff;
  background: #999999;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.sales_status3 {
  color: #ffffff;
  background: #e50113;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.supply_status {
  color: #fff;
  background-color: #ff0000;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.mr5 {
  margin-right: 5px;
}

.toolbar_btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  padding: 8px;
  margin-bottom: 55px;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: transparent;

  .lable {
    color: #3487ff !important;
  }
}

.selectClass {
  &:deep(.el-select__wrapper) {
    background-color: var(--base-small-bg-color) !important;
  }
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.vx-table__form-content) {
  padding-top: 0;
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
}
</style>
<style lang="scss">
.status {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #3a4259;
}

.enable {
  color: #3e66ee;
  width: 18px;
  height: 18px;
  margin-right: 2px;
}

.disabled {
  color: #fc6271;
  width: 18px;
  height: 18px;
  margin-right: 2px;
}

.userName {
  .header {
    display: flex;
    align-items: center;

    .ustatus {
      color: #faad14;
      background-color: #fdf6e8;
      font-size: 12px;
      padding: 0 5px;
      border-radius: 3px;
    }

    .unstatus {
      color: #9da1ad;
      background-color: #e6e7e9;
      padding: 0 5px;
      font-size: 12px;
      border-radius: 3px;
    }
  }

  .department {
    color: #9da1ad;
    font-size: 12px;
  }
}

.high-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #0a1431;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  position: relative;
}

.high-form-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 2px;
  height: 20px;
  background-color: #3487ff;
}
</style>
